<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>角色管理</title>
		  <base href="<%=basePath%>">
		  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		  <link rel="stylesheet" href="res/layui/css/layui.css" media="all">
		  <script src="res\layui\layui.js"></script>
		  <script src="res\layui\jquery-1.10.2.js"></script>
		  <style type="text/css">
		  	#biaodan{
		  		display: none;
		  	}
		  </style>
		  
		  <style>
		    body{margin: 10px;}
		    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
		  </style>
	</head>
	<body>
		<form id="biaodan">
	
		
		<input type="hidden" name="roleId" id="roleId">
			
		</form>
		<div class="demoTable">
		  
		  	角色名称:
		  <div class="layui-inline">
		    <input class="layui-input" name="roleName" id="roleName" autocomplete="off">
		  </div>
		   
		  <button class="layui-btn" data-type="reload">搜索</button>
		  <button data-type="auto" class="layui-btn layui-btn-normal" onclick="showAddOrUpdate()">增加角色</button>
		</div>
		<table class="layui-table" lay-data="{height:471, url:'<%=basePath%>/role/getAllrole.action', page:true, id:'idTest',method:'post'}" lay-filter="demo">
		  <thead>
		    <tr>
		      <th lay-data="{field:'roleName', width:600, align:'center'}">角色名称</th>
		      <th lay-data="{fixed: 'right', width:220, align:'center', toolbar: '#barDemo'}">操作</th>
		    </tr>
		  </thead>
		</table>
		 
		<script type="text/html" id="barDemo">
  			<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="allot">分配模块</a>
  			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
		
		
			
			<script>
			var table;
			layui.use('table', function(){
		  	table = layui.table;
		 	
		  	//监听工具条
		  	table.on('tool(demo)', function(obj){
		    	var data = obj.data;
		    	if(obj.event === 'detail'){
		    	  layer.msg('操作ID='+ data.roleId);
		   	 } else if(obj.event === 'del'){
		    	  layer.confirm('确认要删除吗', function(index){
		          var url = "role/delete.action";
		          var d ={roleId:data.roleId};
		          $.post(url,d,function(mes){
		        	table.reload('idTest'); 
		        	if(mes.state==1){
		        		layer.msg(mes.mes); 
		        	}else{
		        		layer.msg(mes.mes); 
		        	}
		        	
		        },"json");
		       
		        layer.close(index);
		         
		      });
		    } else if(obj.event === 'edit'){
		   		showAddOrUpdate(data.roleId);
		    }else if (obj.event=='allot') {
		    	
		    	allot_model(data.roleId);
			}
		  });
		  
		  var $ = layui.$, active = {
				    reload: function(){
				      
				      var roleName = $('#roleName');
				     
				      table.reload('idTest', {
				        where: {
				        	
				        	roleName: roleName.val()
				        	
				        }
				      });
				    }
		  };
		  $('.demoTable .layui-btn').on('click', function(){
			  
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			  });
		  });
			
		
			 
		  function showAddOrUpdate(roleId){
			var from = $("#fromStr").html();
			
			var addCen= layer.open({
		        type: 2//样式
		        ,skin: 'layui-layer-molv'//样式
		        ,area: ['85%', '70%']
			 	//,area: ['382px', '340px']  // 这里设置 宽高 
			    ,title: '角色维护'
			    ,id : "mesFrom"
		        ,shade: [0.8, '#393D49'] //显示遮罩
		        ,shadeClose:true//点击也能遮罩层关闭
		        ,anim:2//弹出动画
		        ,maxmin: true //允许全屏最小化
		        ,content: 'pages/roleform.jsp?roleId='+roleId
		      });	
		  }
		  
		  	/*角色-分配模块*/
			 function allot_model(id){
		  		
		  		
				  layer.open({
				        type: 2//样式
				        ,skin: 'layui-layer-rim'//样式 加上边框 molv
				        ,area: ['500px', '300px']
					    ,title: '角色维护'
					    ,id : "rolemodelFrom"
				        ,shade: [0.8, '#393D49'] //显示遮罩
				        
				        ,shadeClose:true//点击也能遮罩层关闭
				        ,anim:3//弹出动画
				        ,maxmin: true //允许全屏最小化
				        ,content: 'pages/moduleztree.jsp?id='+id
				      });
				 
				 /*
				 layer.open({
			   	      type: 2,
			   	      skin: 'demo-class',
			   	      title: '分配模块',
			   	      shade: false,
			   	      maxmin: true, //开启最大化最小化按钮
				   	  shadeClose:true,
				      area: ['500px', '300px'],
				      shade: [0.8, '#393D49'],
			   	      content: 'pages/moduleztree.jsp?roleId='+id //iframe的url，no代表不显示滚动条
			   	    });
				 */
			  }
		
		</script>
	</body>
</html>